<template>
    <div class="person">
        <h1>情况一：监视ref定义的基本类型数据</h1>
        <h2>当前求和为 {{ sum }}</h2>
        <button @click="changeSum">点我 +1</button>
    </div>
</template>

<script lang="ts" setup name="Person">
    import { ref, watch } from 'vue';

    let sum = ref(0);

    function changeSum() {
        sum.value += 1;
    }

    // 监视 watch(监视谁，变化调用函数)
    const stopWatchSum = watch(sum, () => {  // 注意，这里不要写sum.value
        console.log(sum.value);
        if (sum.value >= 10) {
            stopWatchSum();     // 解除监视
        }
    });
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px
    }
    button {
        margin: 0 5px;
    }
</style>